<template>
	<view>
		<view id="message">
			<view v-for="(item,index) in arr" :key="index">
				<view :class="item.isreply == '1'?'reply':'ask'">
					<view class="time">
						{{item.time}}
					</view>
					<view class="msg">
						<img :src="item.src" alt="" />
						<text class="name">{{item.name}}</text>
					</view>
					<view class="">
						{{item.msg}}
					</view>
				</view>
			</view>
			<!-- {{message}} -->
		</view>
		<view id="footer">
			<input class="my-input" v-model="msg" type="text" value="" />
			<!-- <input class="my-input" type="text" /> -->
			<p class="send" @click='send'>发送</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canSend: true,
				reply: 'reply',
				ask: 'ask',
				arr: [{
					time: '05/22 06:30',
					src: '../../../static/dailybaby/vqa.png',
					name: 'qq',
					msg: '我是小',
					isreply: '1'
				}],
				message: '',
				msg: ''
			};
		},
		methods: {
			// test() {
			// 	let that = this
			// 	this.arr.forEach(function(i) {
			// 		setTimeout(function() {
			// 			that.reply("../../../static/dailybaby/vqa.png", that.arr[i])
			// 		}, that.sj() * 500)
			// 	})
			// },
			// reply(headSrc, str) {
			// 	var html = "<div class='reply'><div class='msg'><img src=" + headSrc +
			// 		" /><span class='name'>斜杠青年</span><p><i class='msg_input'></i>" + str + "</p></div></div>";
			// 	return this.upView(html);
			// },
			// ask(headSrc, str) {
			// 	this.arr.push()
			// },
			send() {
				let newObj = {
					time: '05/22 06:30',
					src: '../../../static/dailybaby/vqa.png',
					name: 'qq',
					msg: this.msg,
					isreply: '2'
				}
				this.arr.push(newObj)
				// this.ask("../../../static/dailybaby/vqa.png", this.msg);
				this.msg = ''
			},
			sj() {
				return parseInt(Math.random() * 10)
			},
		},
		computed: {
			// canSend: () => {
			// 	$('#footer').on('keyup', 'input', function() {
			// 		if ($(this).val().length > 0) {
			// 			$(this).next().css('background', '#114F8E').prop('disabled', true);
			// 			canSend = true;
			// 		} else {
			// 			$(this).next().css('background', '#ddd').prop('disabled', false);
			// 			canSend = false;
			// 		}
			// 	})
			// 	return this.message.split('').reverse().join('')
			// }
		}
	}
</script>

<style lang="less">
	#message {
		background-color: #f1f1f1;
		padding: 120rpx 30rpx 10rpx
	}

	.time {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 30rpx;
		text-align: center
	}

	#footer {
		position: fixed;
		bottom: 100px;
		height: 100rpx;
		background-color: #fff;
		line-height: 100rpx;
		width: 100%;
		max-width: 720rpx;
		border-top: 1px solid #ddd
	}

	#footer img {
		margin-left: 20rpx;
		width: 500rpx
	}

	#footer input {
		margin-left: 20rpx;
		width: 350rpx;
		height: 64rpx;
		border-radius: 10rpx;
		border: 1px solid #ddd;
		padding: 0 15rpx
	}

	#footer p {
		width: 120rpx;
		height: 68rpx;
		font-size: 30rpx;
		color: #fff;
		line-height: 68rpx;
		text-align: center;
		background-color: #ddd;
		border-radius: 10rpx;
		float: right;
		margin-top: 20rpx;
		margin-right: 20rpx
	}

	.reply:after,
	.ask:after,
	.msg:after {
		content: "";
		clear: both;
		display: table
	}

	.msg {
		position: relative
	}

	.reply .msg .name {
		position: absolute;
		font-size: 24rpx;
		color: #999;
		top: -10rpx;
		left: 90rpx
	}

	.msg>img {
		width: 80rpx;
		float: left
	}

	.reply .msg>p {
		top: 30rpx
	}

	.msg>p {
		float: left;
		margin: 0 40rpx;
		padding: 25rpx;
		background: #fff;
		font-size: 30rpx;
		position: relative;
		border-radius: 20rpx;
		max-width: 500rpx;
		min-height: 80rpx;
		box-sizing: border-box;
		word-wrap: break-word
	}

	.msg_input {
		position: absolute;
		// background: url(./../images/msg-input.png) no-repeat;
		// background-size: .31rpx auto;
		width: 31rpx;
		height: 51rpx;
		left: -31rpx;
		top: 25rpx
	}

	.ask .msg img,
	.ask .msg p,
	.ask .msg {
		float: right
	}

	.ask .msg_input {
		left: auto;
		right: -11rpx;
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg)
	}

	.reply,
	.ask {
		padding-bottom: 70rpx
	}

	.alert_novip,
	.flower_num,
	.give_flower {
		display: none;
		padding: 30rpx 50rpx;
		font-size: 28rpx
	}

	.alert_novip p,
	.flower_num p {
		margin-bottom: 45rpx
	}

	.layui-layer-wrap button {
		font-size: 28rpx;
		padding: 20rpx 30rpx;
		margin-top: 10rpx;
		background: #f8f8f8;
		border-radius: 10px
	}

	.flower_num button {
		padding: 20rpx 50rpx;
		border-radius: 10px
	}

	.layui-layer-wrap button:first-child {
		float: left
	}

	.layui-layer-wrap button:last-child {
		float: right;
		background: #ff7171;
		color: #fff
	}

	.alert_novip button {
		padding: 20rpx 30rpx;
		border-radius: 10px
	}

	.flower {
		width: 80rpx;
		margin: 0 auto
	}

	.give_flower {
		text-align: center
	}

	.give_flower p {
		text-align: center;
		line-height: 1.5
	}

	.give_flower input {
		width: 100rpx;
		margin-right: 10rpx;
		margin-top: 20rpx
	}

	.give_flower button {
		display: block;
		width: 300rpx;
		font-size: 28rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		float: none !important;
		line-height: 65rpx;
		border-radius: 10px
	}
</style>
